<!DOCTYPE html>
<!-- saved from url=(0037)http://5a8fa9a355aa9.t73.qifeiye.com/ -->
<html class="bit-html mobile-false js_active  vc_mobile  vc_transform  vc_transform  iphorm-js csstransforms csstransforms3d csstransitions no-touch"
      dir="ltr" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>资料报道</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-resource1.5.1"></script>
    <link type="text/css" rel="stylesheet" href="style/style.css">
    <style type="text/css">
        .add {
            width: 100%;
            overflow: hidden;
        }

        .add ul {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .add ul li {
            list-style-type: none;
            float: left;
            display: inline;
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-bottom: 10px;
        }

        .add ul li input {
            width: 80%;
            height: 100%;
            font-family: 微软雅黑;
            border-radius: 4px;
            border: none;
            background-color: #F1F1F1;
            padding-left: 5px;
        }

        .add-button {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        .add-button button {
            width: 80px;
            height: 40px;
            line-height: 40px;
            color: #FFFFFF;
            background-color: #1389D3;
            border: none;
            text-align: center;
            border-radius: 4px;
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
<div id="app">
    <!--添>
    <!--头部-->
    <header>
        <div class="logo fleft"><img src="images/logo.png"/> 中移入职管理系统</div>
        <div class="nav fleft ulli">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="report.html" style="background-color:#2294DC;">资料报到</a></li>
                <li><a href="input.html">信息录入</a></li>
                <li><a href="articles.html">办公用品</a></li>
                <li><a href="site.html">办公站点</a></li>
                <li><a href="software.html">软件支持</a></li>
                <li><a href="password.html">系统设置</a></li>
                <li><a href="JavaScript:" class="dakai">二维码</a></li>
            </ul>
        </div>
        <div class="search fleft"><input class="search-keyword" placeholder="搜索"></div>
        <div class="admin fleft"><img src="images/person.png"/><a href="JavaScript:" class="xiala">{{user.username}}<img
                src="images/sanjx.png"/></a></div>
    </header>
    <!--头部-->

    <!--中间-->
    <div class="middle">
        <div class="middle-left fleft">
            <ul>
                <li>快捷导出</li>
                <li><a href="entry.html">入职列表</a></li>
                <li><a href="pay.html">薪酬信息</a></li>
                <li><a href="education.html">学历学位</a></li>
                <li><a href="number.html">账号信息</a></li>
            </ul>
        </div>
        <div class="middle-right fright ulli">
            <div class="report-add">
                <ul>
                    <li><a class="opoenz" @click="modelShow=!modelShow;emp={}">✚新增账号</a></li>
                    <li><a href="#">回收站</a></li>
                </ul>
            </div>
            <div class="entry">
                <div class="entry-body">
                    <table>
                        <tbody>
                        <tr valign="top">
                            <td>编号</td>
                            <td>姓名</td>
                            <td>工号</td>
                            <td>部门</td>
                            <td>职务</td>
                            <td>手机号</td>
                            <td>短号</td>
                            <td>登陆账号</td>
                            <td>初始密码</td>
                            <td>互联网邮箱</td>
                            <td>操作</td>
                        </tr>
                        <tr valign="top" v-for="emp in emps">
                            <td>1</td>
                            <td>{{emp.employeeName}}</td>
                            <td>{{emp.employeeId}}</td>
                            <td>{{emp.department}}</td>
                            <td>{{emp.post}}</td>
                            <td>{{emp.mobilePhone}}</td>
                            <td>{{emp.cornopean}}</td>
                            <td>{{emp.username}}</td>
                            <td>{{emp.password}}</td>
                            <td>{{emp.email}}</td>
                            <td><a href="#" class="bj">报到完成</a> <a href="#" class="bj" @click="edit(emp.id)">编辑</a>
                                <a href="#" class="sc" @click="deleteEmployee(emp.id)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="paglist ulli">
                <ul>
                    <li><a href="#"><<</a></li>
                    <li><a href="#"><</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">></a></li>
                    <li><a href="#">>></a></li>
                </ul>
            </div>
            <div class="foot">Copyright © 中移（成都）产业研究院</div>
        </div>
    </div>
    <!--中间-->


    <!--蒙层-->
    <!--<div class="mengceng">-->
    <!--<div class="all-table">-->
    <!--<div class="table-title"><strong>■</strong> 详细档案——张小明 <span class="close"><a href="JavaScript:">✖</a></span></div>-->
    <!--<div class="table-body">-->
    <!--<iframe src="detailed.html" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--蒙层-->
    <!--添加账号-->
    <div class="mengcengz" v-if="modelShow">
        <div class="all-tablez">
            <div class="table-title"><strong>■</strong> 添加/修改账号 <span class="closez"><a href="#"
                                                                                        @click="modelShow=!modelShow">✖</a></span>
            </div>
            <div class="table-body">
                <div class="add">
                    <ul>
                        <input type="hidden" v-model="emp.id"/>
                        <li><input class="input" placeholder="姓名" v-model="emp.employeeName"></li>
                        <li>
                            <!--<input class="input"  v-model="emp.department">-->
                            <select class="input" placeholder="请选择择一个部门" v-model="emp.department" name="department"
                                    @change='getEmployeeId'>
                                <option v-for="dept in departments" :value="dept.documentSimple">
                                    {{dept.documentSimple}}
                                </option>
                            </select>
                        </li>
                        <li><input class="input" placeholder="手机" v-model="emp.mobilePhone"></li>
                        <li><input class="input" placeholder="职务" v-model="emp.post"></li>
                        <li><input class="input" placeholder="短号" v-model="emp.cornopean"></li>
                        <li><input class="input" placeholder="工号" v-model="emp.employeeId"></li>
                        <li><input class="input" placeholder="登陆账号" v-model="emp.username"></li>
                        <li><input class="input" placeholder="初始密码" v-model="emp.password"></li>
                        <li><input class="input" placeholder="互联网邮箱" v-model="emp.email"></li>
                    </ul>
                    <div class="add-button">
                        <button type="button" @click="createAccount">确 定</button>
                    </div>
                </div>
                <!--<iframe src="add.html" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>-->
            </div>
        </div>
    </div>

    <div class="erweima">
        <div class="index-ewm">
            <div class="table-title" style="border:none;"> 信息录入二维码地址 <span class="guanbi"><a
                    href="JavaScript:">✖</a></span></div>
            <img src="images/ewm.png"/>
        </div>
    </div>

    <div class="admin-more">
        <ul>
            <li><a href="/password.html">设置</a></li>
            <li><a href="/logout">退出</a></li>
        </ul>
    </div>

    <!--添加账号-->

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            modelShow: false,
            employeeIdTmp: "",
            errors: [],
            departments: [],
            emp: {employeeId: ""},
            emps: [],
            user: {username:"123"}
        },
        created: function () {
            this.getEmps();
            this.getDepartments();
            this.user = JSON.parse(this.get("loginUser")).data;
            console.log(this.user)
        },
        methods: {
            get: function (name) {
                var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');

                return v ? v[2] : null;

            },
            getEmps: function () {
                //发送get请求
                this.$http.get('/employee').then(function (res) {
                    this.emps = res.body;
                }, function () {
                    console.log('请求失败处理');
                });
            },
            getDepartments: function () {
                this.$http.get("/department").then(response => {
                    this.departments = response.body;
            })
                ;
            },
            getEmployeeId: function () {
                let url = "/employee/" + this.emp.department;
                let obj = $.ajax({url: url, async: false, dataType: "json"})
                this.emp.employeeId = obj.responseJSON.employeeId;
                console.log(this.emp);
            },
            deleteEmployee: function (id) {
                this.$http.delete("/employee/" + id).then(function (resp) {
                    if (resp.status === 200) {
                        window.location.href = "/report.html";
                    }
                });
            },
            createAccount: function () {
                console.log(this.emp);
                if (!this.checkParameters()) {
                    let err = "";
                    for (let index in this.errors) {
                        err += this.errors[index];
                    }
                    alert(err);
                    return;
                }

                if (this.emp.id) {
                    // 有id 则表示更新数据
                    //发送 post 请求
                    this.$http.put('/employee/' + this.emp.id,
                        this.emp).then(function (res) {
                        if (res.status === 200) {
                            window.location.href = "/report.html";
                        }
                    }, function () {
                        console.log('请求失败处理');
                    });
                } else {
                    // 无ID 则表示创建数据
                    //发送 post 请求
                    this.$http.post('/employee',
                        this.emp).then(function (res) {
                        if (res.status === 200) {
                            window.location.href = "/report.html";
                        }
                    }, function () {
                        console.log('请求失败处理');
                    });
                }
                this.modelShow = false;
            },
            edit: function (id) {
                this.modelShow = true;

                for (let index in this.emps) {
                    if (this.emps[index].id === id) {
                        this.emp = this.emps[index];
                        break;
                    }
                }
            },
            checkParameters: function () {
                this.errors = [];
                if (!this.emp.employeeName) {
                    this.errors.push('员工姓名不能为空');
                    return false;
                }
                if (!this.emp.employeeId) {
                    this.errors.push('员工编号不能为空');
                    return false;
                }
                if (!this.emp.department) {
                    this.errors.push('员工部门不能为空');
                    return false;
                }
                if (!this.emp.post) {
                    this.errors.push('员工职务不能为空');
                    return false;
                }
                if (!this.emp.mobilePhone) {
                    this.errors.push('员工手机号码不能为空');
                    return false;
                }
                if (!this.emp.cornopean) {
                    this.errors.push('员工短号不能为空');
                    return false;
                }
                if (!this.emp.username) {
                    this.errors.push('员工登录账号不能为空');
                    return false;
                }
                if (!this.emp.password) {
                    this.errors.push('员工登录账号密码不能为空');
                    return false;
                }
                if (!this.emp.email) {
                    this.errors.push('员工邮箱不能为空');
                    return false;
                }

                return true;
            }
        }/*,
            computed: {
                changeEmployeeId() {
                    return this.emp.department
                }
            },
            watch: {
                changeEmployeeId(val){
                    let url = "/employee/" + this.emp.department;
                    let obj =$.ajax({url: url, async:false, dataType: "json"})
                    this.emp.employeeId = obj.responseJSON.employeeId;
                }
            }*/
    });
</script>

</body>
</html>